<template>
  <CommonPage>
    <MyTable
      ref="$table"
      :columns="columns"
      :get-data="menuApi.getMenus"
      :is-pagination="false"
      row-key="permissionId"
      default-expand-all
      :max-height="650"
      list-key="/menu:get"
    >
      <template #action>
        <n-button v-permission="`/menu:post`" type="primary" @click="handleAdd">添加权限</n-button>
      </template>
    </MyTable>
    <MyModal
      ref="$form"
      :model-form="model"
      :disabled="type === 'view'"
      :width="900"
      @submit="handleSubmit"
    >
      <n-form-item label="父级" path="pid">
        <n-cascader
          v-model:value="model.pid"
          :options="menuOptions"
          clearable
          value-field="id"
          :disabled="type === 'edit'"
        />
      </n-form-item>
      <n-form-item
        label="权限名称"
        path="name"
        :rule="[{ required: true, message: '请输入权限名称' }]"
      >
        <n-input v-model:value="model.name" maxlength="50" clearable placeholder="请输入权限名称" />
      </n-form-item>
      <n-form-item
        label="权限编码"
        path="code"
        :rule="[{ required: true, message: '请输入权限编码' }]"
      >
        <n-input
          v-model:value="model.code"
          maxlength="50"
          clearable
          placeholder="请输入权限编码"
          :disabled="type === 'edit'"
        />
      </n-form-item>
      <n-form-item label="是否路由" path="routeFlag">
        <n-switch v-model:value="model.routeFlag" :checked-value="1" :unchecked-value="0" />
      </n-form-item>
      <n-form-item
        label="路由路径"
        path="path"
        :rule="{ required: model.routeFlag === 1, message: '权限为路由时路径必填' }"
      >
        <n-input v-model:value="model.path" maxlength="50" clearable placeholder="请输入菜单路径" />
      </n-form-item>
      <n-form-item label="是否菜单" path="menuFlag">
        <n-switch v-model:value="model.menuFlag" :checked-value="1" :unchecked-value="0" />
      </n-form-item>
      <n-form-item label="菜单图标" path="icon">
        <n-input v-model:value="model.icon" maxlength="50" clearable placeholder="请输入菜单图标" />
      </n-form-item>
      <n-form-item label="鉴权标志" path="sn">
        <n-input v-model:value="model.sn" maxlength="50" clearable placeholder="请输入鉴权标志" />
      </n-form-item>
      <n-form-item label="权限标志" path="url">
        <n-input v-model:value="model.url" maxlength="50" clearable placeholder="请输入权限标志" />
      </n-form-item>
      <n-form-item label="排序" path="sort">
        <n-input-number
          v-model:value="model.sort"
          :max="1000"
          placeholder="请输入排序，按数字升序"
        />
      </n-form-item>
    </MyModal>
  </CommonPage>
</template>
<script setup lang="jsx">
import * as menuApi from '@/api/menu'
import { useCrudPro } from '@/hooks/useCrudPro'
defineOptions({ name: 'MenuIndex' })
const columns = [
  {
    title: '权限名称',
    key: 'name',
    render({ name, routeFlag, menuFlag }) {
      return (
        <div class="flex items-center gap-x-6">
          <div>{name}</div>
          {menuFlag ? (
            <n-tag type="info" size="small">
              菜单
            </n-tag>
          ) : null}
          {routeFlag ? (
            <n-tag type="info" size="small">
              路由
            </n-tag>
          ) : null}
        </div>
      )
    },
  },
  {
    title: '权限编码',
    key: 'code',
  },
  {
    title: '路由路径',
    key: 'path',
  },
  {
    title: '操作',
    key: 'actions',
    width: 220,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return (
        <n-flex>
          <n-button v-permission="/menu:put" text onClick={() => handleEdit(row)}>
            修改
          </n-button>
          <n-button
            v-permission="/menu:delete"
            text
            onClick={() =>
              handleDelete(row.permissionId, {
                title: '删除权限',
                content: `请确定是否删除权限：${row.name}`,
              })
            }
          >
            删除
          </n-button>
        </n-flex>
      )
    },
  },
]
const { type, model, $form, $table, handleAdd, handleEdit, handleSubmit, handleDelete } =
  useCrudPro({
    name: '权限',
    initForm: {
      permissionId: null,
      pid: null,
      name: null,
      code: null,
      icon: null,
      routeFlag: 0,
      menuFlag: 0,
      path: null,
      sn: null,
      url: null,
      sort: 0,
    },
    apis: {
      add: menuApi.addMenu,
      edit: menuApi.editMenu,
      del: menuApi.deleteMenu,
      info: ({ permissionId }) => {
        return menuApi.getMenuInfo(permissionId).then((res) => res.data)
      },
    },
    onShow() {
      getMenuOptions()
    },
  })
const menuOptions = ref([])
async function getMenuOptions() {
  const { data } = await menuApi.getMenuTree()
  menuOptions.value = data
}
onBeforeMount(() => {
  getMenuOptions()
})
</script>
<style lang="scss" scoped></style>
